$centerWidth:1140px;

// @mixin 混合   是可以重用的代码块。
@mixin center{
    width: $centerWidth;
    margin: 0 auto;
}

@mixin positionCenter {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

// @mixin 混合  还可以接收参数和默认值
@mixin positionCenter($type:absolute) {
    position: $type;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

@function pxToRem($val){
    @return #{$val/100px}rem;
}

// 此处就不会被sass编译
%w{
    width: pxToRem($centerWidth);
    margin: 0 auto;
}


@import "_reset.scss";



.w{
    width: pxToRem($centerWidth);
    margin: 0 auto;
}

.header{
   @include center;
   @include positionCenter;
}

// 让一个类继承另一个类的属性和方法
.header,.main,.footer{
    @extend .w;
    height: 200px;
}